<template>
  <div class="knowledge">
    <h1>请你谈谈nextTick</h1>
<P>Vue在修改数据时，DOM并不会立即更新，会将DOM更新操作放入一个队列(queue)，通过Promise.then(微任务)或MutationObserver(部分环境)触发批量更新。nextTick等待当前队列中的所有更新完成后执行回调函数，这样就能确保能访问到更新后的 DOM 状态。</P>
  
  <h1>为什么需要 nextTick?</h1>
<P>Vue 使用异步更新队列来优化性能：</P>
<P>当数据变化时，Vue 不会立即更新 DOM，此时如果想要立即获取更新后的 DOM 状态，就需要借助该方法。</P>
<P>而是开启一个队列，缓冲同一事件循环中的所有数据变更</P>
<P>在下一个事件循环的 "tick" 中刷新队列</P>
<P>nextTick让你能在 DOM 更新后执行回调</P>

<h1>https://mp.weixin.qq.com/s/HG9bZvl2qGv_xqN5PTnd9w</h1>
<h1>谈谈你对vue3 响应式原理的理解</h1>

<P>Vue3的响应式系统基于ES6的Proxy实现，相比Vue2的Object.defineProperty具有更强大的拦截能力。当使用reactive()函数创建响应式对象时，实际上会返回一个Proxy实例，这个代理对象(代理实例对象)会拦截所有对原始对象的操作。对于基本类型数据，使用ref()进行包装，通过.value属性访问时实现依赖收集。</P>
<P>在依赖收集阶段，当组件渲染函数访问响应式数据，会触发Proxy的get拦截器，此时会调用track函数将正在执行的副作用函数(称为effect)作为依赖，存储到WeakMap → Map → Set的三级依赖映射结构中‌。</P>
<P>当数据发生变化时，会触发Proxy的set拦截器，首先通过Reflect.set()更新目标对象值，然后调用trigger函数查找 依赖树中关联的所有副作用函数，将它们放入异步更新队列，Vue3采用调度器(scheduler)批量更新队列。对于组件更新，会触发renderWatcher回调，重新执行render函数，生成新的虚拟DOM，然后通过 Diff 算法 比对变化后更新真实 DOM。</P>
  
  <h1>Vue 3 实现图片懒加载的两种方式</h1>
<P>方法一：使用 IntersectionObserver API 手动实现</P>
<P>方法二：使用第三方库 vueuse，vue-lazyload</P>
  
  <h1>v-show和v-if有什么区别?</h1>
<P>v-if是真正的条件渲染指令，它会根据表达式的真假值在DOM中动态创建或销毁元素及其子组件。当条件变为假时，v-if会完全移除对应的DOM节点，包括绑定的事件监听器和子组件实例都会被销毁，再次切换为真时会重新创建并触发完整的生命周期钩子。这意味着频繁切换的场景下，v-if会产生较高的性能开销。</P>
<P>相比之下，v-show的实现原理完全不同，它仅仅是通过切换CSS的display属性来控制元素的可见性。无论条件如何变化，元素始终存在于DOM中，只是被简单地隐藏或显示。因此v-show不会触发组件的创建和销毁生命周期，在初始渲染时需要更高的成本(因为无论条件如何都会渲染)，但在切换时性能开销极低。</P>
  
<h1>Vue 3 的双向绑定原理</h1>
<P>Vue 3 的双向绑定原理是基于 响应式系统 和 数据劫持 技术来实现的。在 Vue 3 中，双向绑定通常是通过v-model 指令来完成的，它本质上是数据的双向同步：当数据改变时，视图自动更新，反之，视图的修改也会更新到数据。</P>
  

<h1>单页面应用项目过大首页加载慢的解决方案</h1>
<P>使用 CDN 资源： 将静态资源(如 JavaScript、CSS、图片等)托管到 CDN 上，利用 CDN 的分布式网络加速资源的加载，减少服务器带宽压力，提高资源加载速度。</P>
<P>路由懒加载： 将页面的组件按需加载，即使用路由懒加载技术，当用户访问某个页面时再动态加载该页面所需的组件和资源，减少首屏加载时间和资源占用。</P>
<P>按需加载第三方资源： 如果使用了一些第三方库或框架(如 Vue.js、React 等)，可以按需加载相关组件或模块，而不是一次性加载整个库，以减小页面的资源体积和加载时间。</P>
<P>使用 Nginx 开启 Gzip 压缩： 在服务器端配置 Nginx，开启 Gzip 压缩功能，将页面和静态资源进行压缩，减小传输内容的大小，提高网络传输速度。</P>
<P>Webpack 开启 Gzip 压缩： 在前端构建工具 Webpack 中，配置 Gzip 压缩插件，对打包后的资源进行压缩，减小资源文件的体积，加快资源加载速度。</P>
<P>将静态资源放到其他地方(如 OSS)： 将一些静态资源(如图片、视频等)托管到第三方对象存储服务(如阿里云 OSS、七牛云等)，减轻服务器的负担，提高页面加载速度。</P>
<P>使用 SSR 渲染： 对于需要 SEO 优化或首屏加载速度要求较高的单页面应用，可以考虑使用服务器端渲染(SSR)，将页面的初始 HTML 内容直接生成在服务器端，加快首屏渲染速度，提高用户体验。</P>

  </div>
</template>

<script lang="ts" setup>
import { h } from 'vue';


</script>

<style lang="less" scoped>
.knowledge{
    width:900px;
    padding:0 100px;
    text-align: center;
    p{
        text-align: justify;
    }
}
</style>
